<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>景区审核管理</title>
  <!-- 引入 Vue.js -->
  <script src="/js/vue.js"></script>
  <!-- 引入 Element UI CSS -->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!-- 引入 Element UI JS -->
  <script src="/js/index.js"></script>
  <!-- 引入 Axios -->
  <script src="/js/axios.min.js"></script>
  <style>
    .app-container {
      padding: 20px;
      background-color: #f5f7fa;
      min-height: 100vh;
    }
    .search-container {
      margin-bottom: 20px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .table-container {
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .action-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
    .dialog-footer {
      text-align: right;
    }
    .status-pending {
      color: #909399;
      font-weight: bold;
    }
    .status-passed {
      color: #67C23A;
      font-weight: bold;
    }
    .status-rejected {
      color: #F56C6C;
      font-weight: bold;
    }
    .scenic-image-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      overflow: hidden;
    }
    .scenic-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    .status-deleted {
      color: #909399;
      font-weight: bold;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
<div id="app" class="app-container">
  <!-- 搜索区域 -->
  <div class="search-container">
    <el-row :gutter="15">
      <el-col :span="5">
        <el-input
                size="small"
                v-model="searchForm.scenicName"
                placeholder="请输入景区名称"
                prefix-icon="el-icon-search"
                clearable>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-select
                size="small"
                v-model="searchForm.auditStatus"
                placeholder="请选择审核状态"
                style="width: 100%;">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已通过" value="1"></el-option>
          <el-option label="已拒绝" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="14">
        <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search">
          搜索
        </el-button>
        <el-button
                size="small"
                type="success"
                icon="el-icon-refresh"
                @click="refreshData">
          刷新
        </el-button>
      </el-col>
    </el-row>
  </div>

  <!-- 审核列表表格 -->
  <div class="table-container">
    <el-table
            :data="tableData"
            style="width: 100%"
            border
            stripe
            highlight-current-row>
<!--      <el-table-column prop="scenicName" label="景区名称" width="150" align="center"></el-table-column>-->
<!--      <el-table-column prop="saddress" label="地址" width="150" align="center"></el-table-column>-->

      <el-table-column prop="scenicName" label="景区名称" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.scenicName || '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="saddress" label="地址" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.saddress || '-' }}
        </template>
      </el-table-column>

      <!-- 修复：添加封面图片渲染模板 -->
      <el-table-column prop="scover" label="封面" width="100" align="center">
        <template slot-scope="scope">
          <div class="scenic-image-container">
          <img v-if="scope.row.scover"
               :src="scope.row.scover"
               class="scenic-image"
               @error="$event.target.src='/img/默认.jpg'">
          <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column prop="scover" label="封面图" width="120" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <img :src="'/images/' + scope.row.scover" alt="封面" width="60" height="40">-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="auditStatus" label="审核状态" width="120" align="center">
        <template slot-scope="scope">
                    <span :class="{
                        'status-pending': scope.row.auditStatus === '0',
                        'status-passed': scope.row.auditStatus === '1',
                        'status-rejected': scope.row.auditStatus === '2',
                        'status-deleted': scope.row.auditStatus === '3'  // 新增删除状态样式

                    }">
                        {{ statusMap[scope.row.auditStatus] }}
                    </span>
        </template>
      </el-table-column>
      <el-table-column prop="auditPeople" label="审核人" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.auditPeople || '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="auditTime" label="审核时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.auditTime || '-' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <div class="action-buttons">
            <el-button
                    size="mini"
                    type="primary"
                    @click="handleAudit(scope.row)">
              审核
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background>
      </el-pagination>
    </div>
  </div>

  <!-- 审核弹窗 -->
  <el-dialog
          title="审核操作"
          :visible.sync="dialogVisible"
          width="500px"
          :close-on-click-modal="false">
    <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="100px">
      <el-form-item label="审核结果" prop="auditStatus">
        <el-radio-group v-model="form.auditStatus">
          <el-radio label="1">通过</el-radio>
          <el-radio label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="拒绝原因" prop="rejectReason" v-if="form.auditStatus === '2'">
        <el-input
                v-model="form.rejectReason"
                type="textarea"
                :rows="3"
                placeholder="请输入拒绝原因">
        </el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
                v-model="form.remarks"
                type="textarea"
                :rows="3"
                placeholder="请输入备注">
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitAudit">确 定</el-button>
    </div>
  </el-dialog>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        searchForm: {},
        dialogVisible: false,
        form: {
          auditId: '',
          auditStatus: '',
          rejectReason: '',
          remarks: ''
        },
        currentRow: null,

        statusMap: {
          '0': '待审核',
          '1': '已通过',
          '2': '已拒绝',
          '3': '景区已删除'
        },

        rules: {
          auditStatus: [
            { required: true, message: '请选择审核结果', trigger: 'change' }
          ],
          rejectReason: [
            { required: true, message: '请输入拒绝原因', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        let _this = this;
        axios.post('/scenicAudit/queryByPage', {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          data: this.searchForm,
        }).then(function (response) {
          console.log("hhhhhhh============"+response.data) // 打印完整响应
          if (response.data.code === 200) {
            _this.tableData = response.data.data.list;
            _this.total = response.data.data.total,
            console.log("============"+_this.tableData) // 打印完整响应
          }
        }).catch(function (error) {
          console.log(error);
        });

      },


      handleSizeChange(val) {
        this.pageSize = val;
        this.loadData();
      },

      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadData();
      },

      search() {
        this.loadData();
      },

      refreshData() {
        this.searchForm = {};
        this.loadData();
      },

      handleAudit(row) {
        // 判断审核状态是否为3（景区已删除）
        if (row.auditStatus === '3') {
          this.$message.warning('该景区已被删除，无法进行审核操作');
          return;
        }

        this.currentRow = row;
        this.dialogVisible = true;
        this.form.auditId = row.auditId;
        this.form.auditStatus = row.auditStatus; // 默认显示当前状态
        this.form.rejectReason = row.rejectReason || '';
        this.form.remarks = row.remarks || '';
      },

      submitAudit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let _this = this;
            axios.post('/scenicAudit/update', this.form)
              .then(function (response) {
              if (response.data.code === 200) {
                _this.$message.success('审核成功');
                _this.dialogVisible = false;
                _this.loadData();
              } else {
                _this.$message.error('审核失败');
              }
            }).catch(function (error) {
              console.log(error);
            });
          }
        });
      },

      handleDelete(row) {
        this.$confirm('此操作将永久删除该审核记录，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _this = this;
          axios.delete('/scenicAudit/deleteById?auditId=' + row.auditId)
                  .then(function (response) {
                    if (response.data.code === 200) {
                      _this.$message.success('删除成功');
                      _this.loadData();
                    } else {
                      // 有后端错误提示就提示，没有就提示默认的删除失败
                      _this.$message.error(response.data.message || '删除失败');
                    }
                  }).catch(function (error) {
            console.log(error);
          });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    }
  });
</script>
</body>
</html>
